<template>
  <!-- 修改资料 -->

  <div>
    <el-form :model="form" label-position="right" ref="formRef">
      <ts-card header="运费主表信息">
        <el-row :gutter="12">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="名称" required>
              <el-input v-model="mainTable.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="运费" required>
              <el-input v-model="mainTable.freight" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="计价方式" required>
              <el-input v-model="mainTable.priceKindName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="运输方式" required>
              <el-input
                v-model="mainTable.transportModeName"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </ts-card>
      <ts-card>
        <template #header>
          <div style="display: flex; justify-content: space-between">
            <span>运费规则列表</span>
            <div style="display: flex">
              <el-button @click="addRule" type="primary">新 增</el-button>
              <el-button @click="deleteRule" :icon="Delete" type="danger" plain
                >删 除</el-button
              >
            </div>
          </div>
        </template>
        <el-table :data="dataList" @selection-change="selectRule">
          <el-table-column type="selection" width="45"></el-table-column>
          <el-table-column
            prop="defaultMaxQty"
            label="首重/件数 "
          ></el-table-column>
          <el-table-column prop="freight" label="运费"></el-table-column>
          <el-table-column
            prop="increaseQty"
            label="续重/件数"
          ></el-table-column>
          <el-table-column
            prop="increaseFreight"
            label="增加运费 "
          ></el-table-column>
          <el-table-column prop="maxFreight" label="最大运费"></el-table-column>
          <el-table-column
            prop="exceedAmoountFree"
            label="免运费消费金额"
          ></el-table-column>
          <el-table-column prop="areaNames" label="选中地区"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column fixed="right" label="操作" width="60">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="editRule(scope.row)"
                >修 改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </ts-card>
      <ts-card title="运费规则">
        <el-row :gutter="15">
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="首重/件数">
              <el-input-number v-model="form.defaultMaxQty" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="运费">
              <el-input-number v-model="form.freight" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="续重/件数">
              <el-input-number v-model="form.increaseQty" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="增加运费">
              <el-input-number v-model="form.increaseFreight" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="最大运费">
              <el-input-number v-model="form.maxFreight" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="免运费消费金额">
              <el-input-number v-model="form.exceedAmoountFree" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="选中地区">
              <el-tree-select
                style="width: 70%"
                v-model="form.areaIdsArray"
                :data="parentData"
                :render-after-expand="false"
                check-strictly="true"
                multiple
                show-checkbox
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品类别">
              <el-tree-select
                style="width: 70%"
                v-model="form.goodsCategoryIdsArray"
                :data="parentData2"
                :render-after-expand="false"
                check-strictly="true"
                multiple
                show-checkbox
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="选中商品">
              <sc-table-select
                v-model="productList"
                fileName="ProductReport"
                :props="productProps"
                :inputWidth="700"
                :maxCollapseTags="5"
                multiple
              ></sc-table-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品列表">
              <el-table :data="productList">
                <el-table-column prop="name" label="商品名称"></el-table-column>
                <el-table-column
                  prop="number"
                  label="商品编号"
                ></el-table-column>
                <el-table-column
                  prop="mtlKindName"
                  label="商品类别"
                ></el-table-column>
                <el-table-column prop="price" label="单价"></el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
      </ts-card>
    </el-form>
    <div class="button-position">
      <el-button @click="updateVisible">退 出</el-button>
      <el-button type="primary" @click="addFreightRule(formRef)"
        >确 定</el-button
      >
    </div>
  </div>
</template>
      
      
<script setup>
import { reactive, ref, onMounted, nextTick } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { deepClone } from "@/utils/arr";
import tsEditor from "@/components/scEditor/index.vue";
import Api from "@/api/model/mall";
const emit = defineEmits(["updatetable"]);
const props = defineProps({
  paramsData: {
    type: Object,
    defalut: {},
  },
});
// 添加用户数据的对象
const form = ref({});
const mainTable = ref({});
const parentData = ref([]);
const parentData2 = ref([]);
const dataList = ref([]);
const deleteList = ref([]);
const configData = ref({});
const productList = ref([]);
const productProps = {
  value: "id",
  label: "name",
};
const formRef = ref(null);
onMounted(() => {
  getInit();
});

const updateVisible = () => {
  emit("updatetable");
};

const getInit = async (val) => {
  let res = await Api.freight.addSubTable.post(props.paramsData);
  if (res.code == "200") {
    form.value = deepClone(res.data);
    mainTable.value = res.mainTable;
    configData.value = res.configData;
    dataList.value = res.dataList;
    productList.value = [];
  }
  let treeRes = await Api.coupon.tree.post({
    fileName: "AreaFreightTreeReport",
  });
  if (treeRes.code == "200") {
    parentData.value = treeRes.reportData;
  }
  let treeRes2 = await Api.coupon.tree.post({
    fileName: "ProductCategoryTreeReport",
  });
  if (treeRes2.code == "200") {
    parentData2.value = treeRes2.reportData;
  }
};
const selectRule = (rows) => {
  deleteList.value = rows;
};
const addRule = () => {
  getInit();
};
const editRule = async (val) => {
  let res = await Api.freight.detailSubTable.post({ id: val.id });
  console.log(res);
  if (res.code == "200") {
    form.value = deepClone(res.data);
    mainTable.value = res.mainTable;
    configData.value = res.configData;
    dataList.value = res.dataList;
    productList.value = res.goodsList;
  }
};
const deleteRule = async () => {
  if (deleteList.value.length > 0) {
    let param = {
      rowIds: deleteList.value.map((ele) => {
        return ele.id;
      }),
    };
    ElMessageBox.confirm("确定删除吗？", "提示", {
      type: "warning",
      confirmButtonText: "确定",
      confirmButtonClass: "el-button--danger",
    })
      .then(async () => {
        console.log(param);
        let res = await Api.freight.deleteSubTable.post(param);
        if (res.code == 200) {
          ElNotification.success({ message: "删除成功", duration: 2000 });
          getInit();
        }
      })
      .catch(() => {});
  } else {
    ElMessage({
      message: "请选择表格记录",
      type: "warning",
    });
  }
};
const restAddFormData = () => {
  formRef.value.resetFields();
};

// 上传
const addFreightRule = async (formRef) => {
  await formRef.validate((valid, fields) => {
    if (valid) {
      addFreightRuleData();
    }
  });
};

const addFreightRuleData = async () => {
  form.value.goodsIds = productList.value
    .map((ele) => {
      return ele.id;
    })
    .toString();
  let params = {
    bean: form.value,
  };
  let res = await Api.freight.saveOrUpdateSubTable.post(params);
  console.log(res);
  if (res.code == "200") {
    restAddFormData();
    ElNotification.success({
      title: "",
      message: "操作成功！",
      duration: 2000,
    });
    productList.value = [];
    getInit();
  }
};
</script>
      
      <style scoped></style>
      
      